// 主题变量定义
:root {
  // 明亮主题（默认）
  --bg-color-primary: #ffffff;
  --bg-color-secondary: #f8f9fa;
  --bg-color-tertiary: #e9ecef;
  
  --text-color-primary: #303133;
  --text-color-secondary: #606266;
  --text-color-tertiary: #909399;
  --text-color-placeholder: #c0c4cc;
  
  --border-color-primary: #dcdfe6;
  --border-color-secondary: #e4e7ed;
  --border-color-tertiary: #ebeef5;
  
  --shadow-color: rgba(0, 0, 0, 0.1);
  --shadow-color-light: rgba(0, 0, 0, 0.05);
  
  // 导航栏
  --navbar-bg-color: #ffffff;
  --navbar-text-color: #303133;
  --navbar-border-color: #e4e7ed;
  
  // 侧边栏
  --sidebar-bg-color: #f8f8f8;
  --sidebar-text-color: #303133;
  --sidebar-border-color: rgba(60, 60, 60, 0.12);
  --sidebar-hover-bg-color: #f5f7fa;
  --sidebar-active-bg-color: #409eff;
  --sidebar-active-text-color: #ffffff;
  
  // 内容区域
  --content-bg-color: #f5f5f5;
  --card-bg-color: #ffffff;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  // 表格
  --table-header-bg-color: #fafafa;
  --table-row-hover-bg-color: #f5f7fa;
  --table-border-color: #f0f0f0;
  
  // 按钮
  --button-primary-bg-color: #409eff;
  --button-primary-text-color: #ffffff;
  --button-secondary-bg-color: #e9ebf3;
  --button-secondary-text-color: #606266;
}

// 暗色主题
[data-theme="dark"] {
  --bg-color-primary: #1a1a1a;
  --bg-color-secondary: #2d2d2d;
  --bg-color-tertiary: #404040;
  
  --text-color-primary: #ffffff;
  --text-color-secondary: #e0e0e0;
  --text-color-tertiary: #b0b0b0;
  --text-color-placeholder: #808080;
  
  --border-color-primary: #404040;
  --border-color-secondary: #505050;
  --border-color-tertiary: #606060;
  
  --shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-color-light: rgba(0, 0, 0, 0.2);
  
  // 导航栏
  --navbar-bg-color: #1a1a1a;
  --navbar-text-color: #ffffff;
  --navbar-border-color: #404040;
  
  // 侧边栏
  --sidebar-bg-color: #2d2d2d;
  --sidebar-text-color: #ffffff;
  --sidebar-border-color: rgba(255, 255, 255, 0.12);
  --sidebar-hover-bg-color: #404040;
  --sidebar-active-bg-color: #409eff;
  --sidebar-active-text-color: #ffffff;
  
  // 内容区域
  --content-bg-color: #1a1a1a;
  --card-bg-color: #2d2d2d;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  
  // 表格
  --table-header-bg-color: #404040;
  --table-row-hover-bg-color: #404040;
  --table-border-color: #505050;
  
  // 按钮
  --button-primary-bg-color: #409eff;
  --button-primary-text-color: #ffffff;
  --button-secondary-bg-color: #404040;
  --button-secondary-text-color: #e0e0e0;
}

// 主题切换过渡动画
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

// 全局样式应用主题变量
body {
  background-color: var(--bg-color-primary);
  color: var(--text-color-primary);
}

// Element Plus 组件主题覆盖
.el-menu {
  background-color: var(--sidebar-bg-color) !important;
  border-right-color: var(--sidebar-border-color) !important;
}

.el-menu-item {
  color: var(--sidebar-text-color) !important;
}

.el-menu-item:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
}

.el-menu-item.is-active {
  background-color: var(--sidebar-active-bg-color) !important;
  color: var(--sidebar-active-text-color) !important;
}

.el-table {
  background-color: var(--card-bg-color) !important;
  color: var(--text-color-primary) !important;
}

.el-table th {
  background-color: var(--table-header-bg-color) !important;
  color: var(--text-color-secondary) !important;
  border-bottom-color: var(--border-color-secondary) !important;
}

.el-table td {
  border-bottom-color: var(--table-border-color) !important;
}

.el-table tr:hover > td {
  background-color: var(--table-row-hover-bg-color) !important;
}

.el-card {
  background-color: var(--card-bg-color) !important;
  border-color: var(--border-color-secondary) !important;
  box-shadow: var(--card-shadow) !important;
}

.el-input__inner {
  background-color: var(--bg-color-primary) !important;
  color: var(--text-color-primary) !important;
  border-color: var(--border-color-secondary) !important;
}

.el-select .el-input__inner {
  background-color: var(--bg-color-primary) !important;
  color: var(--text-color-primary) !important;
}

.el-dropdown-menu {
  background-color: var(--card-bg-color) !important;
  border-color: var(--border-color-secondary) !important;
}

.el-dropdown-menu__item {
  color: var(--text-color-primary) !important;
}

.el-dropdown-menu__item:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
}

.el-popover {
  background-color: var(--card-bg-color) !important;
  border-color: var(--border-color-secondary) !important;
  color: var(--text-color-primary) !important;
}

.el-dialog {
  background-color: var(--card-bg-color) !important;
}

.el-dialog__header {
  border-bottom-color: var(--border-color-secondary) !important;
}

.el-dialog__title {
  color: var(--text-color-primary) !important;
}

.el-pagination {
  color: var(--text-color-primary) !important;
}

.el-pagination button {
  background-color: var(--bg-color-primary) !important;
  color: var(--text-color-primary) !important;
  border-color: var(--border-color-secondary) !important;
}

.el-pagination button:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
}

.el-pagination .el-pager li {
  background-color: var(--bg-color-primary) !important;
  color: var(--text-color-primary) !important;
  border-color: var(--border-color-secondary) !important;
}

.el-pagination .el-pager li:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
}

.el-pagination .el-pager li.active {
  background-color: var(--button-primary-bg-color) !important;
  color: var(--button-primary-text-color) !important;
}

// 修复输入框在暗色模式下的样式
[data-theme="dark"] .el-input__wrapper {
  background-color: var(--bg-color-secondary) !important;
  border-color: var(--border-color-primary) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .el-input__wrapper:hover {
  border-color: var(--border-color-secondary) !important;
}

[data-theme="dark"] .el-input__wrapper.is-focus {
  border-color: var(--button-primary-bg-color) !important;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
}

[data-theme="dark"] .el-input__inner {
  background-color: transparent !important;
  color: var(--text-color-primary) !important;
}

// 修复选择器下拉菜单
[data-theme="dark"] .el-select-dropdown {
  background-color: var(--card-bg-color) !important;
  border-color: var(--border-color-secondary) !important;
}

[data-theme="dark"] .el-select-dropdown__item {
  color: var(--text-color-primary) !important;
}

[data-theme="dark"] .el-select-dropdown__item:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
}

[data-theme="dark"] .el-select-dropdown__item.selected {
  background-color: var(--button-primary-bg-color) !important;
  color: var(--button-primary-text-color) !important;
}

// 修复搜索框样式
[data-theme="dark"] .el-autocomplete-suggestion {
  background-color: var(--card-bg-color) !important;
  border-color: var(--border-color-secondary) !important;
}

[data-theme="dark"] .el-autocomplete-suggestion__list {
  background-color: var(--card-bg-color) !important;
}

[data-theme="dark"] .el-autocomplete-suggestion li {
  color: var(--text-color-primary) !important;
}

[data-theme="dark"] .el-autocomplete-suggestion li:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
}

// 修复表格在暗色模式下的强制样式
[data-theme="dark"] .el-table th {
  background-color: var(--table-header-bg-color) !important;
  color: var(--text-color-secondary) !important;
  border-bottom-color: var(--border-color-secondary) !important;
}

[data-theme="dark"] .el-table td {
  background-color: var(--card-bg-color) !important;
  color: var(--text-color-primary) !important;
  border-bottom-color: var(--table-border-color) !important;
}

[data-theme="dark"] .el-table tr:hover > td {
  background-color: var(--table-row-hover-bg-color) !important;
}

// 修复分页组件在暗色模式下的样式
[data-theme="dark"] .el-pagination {
  background-color: transparent !important;
}

[data-theme="dark"] .el-pagination button {
  background-color: var(--bg-color-secondary) !important;
  color: var(--text-color-primary) !important;
  border-color: var(--border-color-primary) !important;
}

[data-theme="dark"] .el-pagination button:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
  border-color: var(--border-color-secondary) !important;
}

[data-theme="dark"] .el-pagination .el-pager li {
  background-color: var(--bg-color-secondary) !important;
  color: var(--text-color-primary) !important;
  border-color: var(--border-color-primary) !important;
}

[data-theme="dark"] .el-pagination .el-pager li:hover {
  background-color: var(--sidebar-hover-bg-color) !important;
  border-color: var(--border-color-secondary) !important;
}

[data-theme="dark"] .el-pagination .el-pager li.active {
  background-color: var(--button-primary-bg-color) !important;
  color: var(--button-primary-text-color) !important;
  border-color: var(--button-primary-bg-color) !important;
}

// 修复页面大小选择器
[data-theme="dark"] .el-pagination .el-pagination__sizes .el-select .el-input__wrapper {
  background-color: var(--bg-color-secondary) !important;
  border-color: var(--border-color-primary) !important;
}

// 修复跳转输入框
[data-theme="dark"] .el-pagination .el-pagination__jump .el-input__wrapper {
  background-color: var(--bg-color-secondary) !important;
  border-color: var(--border-color-primary) !important;
}

// 全局暗色模式样式覆盖
[data-theme="dark"] {
  // 确保所有文本颜色正确
  color: var(--text-color-primary) !important;

  // 修复所有背景色
  .el-main {
    background-color: var(--content-bg-color) !important;
  }

  // 修复所有卡片组件
  .el-card__body {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color-primary) !important;
  }

  // 修复所有按钮
  .el-button--default {
    background-color: var(--button-secondary-bg-color) !important;
    color: var(--button-secondary-text-color) !important;
    border-color: var(--border-color-primary) !important;
  }

  .el-button--default:hover {
    background-color: var(--sidebar-hover-bg-color) !important;
    border-color: var(--border-color-secondary) !important;
  }

  // 修复所有文本区域
  .el-textarea__inner {
    background-color: var(--bg-color-secondary) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-primary) !important;
  }

  .el-textarea__inner:hover {
    border-color: var(--border-color-secondary) !important;
  }

  .el-textarea__inner:focus {
    border-color: var(--button-primary-bg-color) !important;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2) !important;
  }

  // 修复所有标签
  .el-tag {
    background-color: var(--bg-color-tertiary) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-primary) !important;
  }

  // 修复所有提示框
  .el-tooltip__popper {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-secondary) !important;
  }

  // 修复所有消息框
  .el-message {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-secondary) !important;
  }

  // 修复所有通知框
  .el-notification {
    background-color: var(--card-bg-color) !important;
    color: var(--text-color-primary) !important;
    border-color: var(--border-color-secondary) !important;
  }

  // 修复所有加载遮罩
  .el-loading-mask {
    background-color: rgba(26, 26, 26, 0.8) !important;
  }

  .el-loading-text {
    color: var(--text-color-primary) !important;
  }
}
